<template>
  <div class="bai-du-map-cls" ref="mapBoxRef" :style="`height:${props.Height}%;width:${props.Width}%`"></div>
</template>

<script setup>
import mapStyleJson from '@/common/utils/mapStyle.json'
const props = defineProps(['Height', 'Width'])
var baiduMap = null //用来注册地图
let selectMarker = null //用来注册选中点
let icon1 = null
let icon2 = null
let selectIcon1 = null
let selectIcon2 = null
const mapBoxRef = ref(); //获取地图容器
import { useBigScreenStore } from "@/pinia/bigScreen"
const bsStore = useBigScreenStore();


const initMap = (str) => {
  console.log(`initMap->${str}`);
  console.log('项目信息->', bsStore.projectList.length);
  if (str !== '初始化') {
    console.log('bsStore.projectList->', bsStore.projectList);
    console.log('绘制点位->', bsStore.projectList[0].longitude, bsStore.projectList[0].latitude);
    bsStore.projectList.forEach((pro, index) => {
      drawProjectPoint(pro, index)
    });
  } else {
    if (baiduMap === null) {
      setTimeout(() => {
        baiduMap = new BMapGL.Map(mapBoxRef.value);
        console.log('地图实例创建成功:', baiduMap);
        let centerPoint = new BMapGL.Point(110.04263635868074, 30.176100647961866);
        baiduMap.centerAndZoom(centerPoint, 5.5);
        baiduMap.enableScrollWheelZoom(true);
        baiduMap.setMapStyleV2({ styleJson: mapStyleJson });
        console.log('地图样式设置成功');
      }, 1000);
    }
  }
}

const delCircle = (marker) => {
  if (marker.domElement) {
    marker.domElement.className = ''
  }
}

const addCircle = (marker) => {
  // 新增三个容器，在这两个容器上新增动画效果
  let divElement = document.createElement('div');
  divElement.className = 'before';
  let divElement2 = document.createElement('div');
  divElement2.className = 'circleOne';
  let divElement3 = document.createElement('div');
  divElement3.className = 'circleTwo';
  let divElement4 = document.createElement('div');
  divElement4.className = 'circleThree';

  marker.domElement.innerHtml = marker.domElement.childNodes[0];
  marker.domElement.appendChild(divElement);
  marker.domElement.appendChild(divElement2);
  marker.domElement.appendChild(divElement3);
  marker.domElement.appendChild(divElement4);
  marker.domElement.className = '';
  marker.domElement.className = 'dot';
  marker.domElement.style.overflow = '';
  marker.domElement.firstChild.style.position = 'relative';
  // marker.domElement.firstChild.style.zIndex = '5';
}

const getInfoContent = (project) => {
  // 使用模板字符串构建HTML内容
  let html = [];
  html.push(`<div class="infoBox">`);
  html.push(`<div class="infoItems"><span>项目名称：</span><span>${project.projectName}</span></div>`)
  html.push(`<div class="infoItems"><span>地址：</span><span>${project.address || ''}</span></div>`)
  html.push(`<div class="infoItems"><span>客户属性：</span><span>${project.attributes}</span></div>`)
  html.push(`<div class="infoItems"><span>总功率：</span><span>${project.sbzgl}KM</span></div>`)
  html.push(`<div class="infoItems"><span>设备总数：</span><span>${project.lightFixtureCount}盏</span></div>`)
  html.push(`<div class="infoItems"><span>地面照度：</span><span>${project.dmzd}LUX</span></div>`)
  html.push(`<div class="infoItems"><span>节能率：</span><span>${project.energyEfficiency + '%'}</span></div>`)
  html.push(`<div class="infoItems"><span>运行时长：</span><span>${project.yxsc}天</span></div>`)
  html.push(`</div>`);
  return html.join("");
};

const drawProjectPoint = (project, index) => {
  const point = new BMapGL.Point(parseFloat(project.longitude), parseFloat(project.latitude));
  let nt = project.energyEfficiency * 1 || 0
  let myIcon = null
  icon1 = new BMapGL.Icon('', new BMapGL.Size(13, 34));
  icon2 = new BMapGL.Icon('', new BMapGL.Size(13, 43));
  selectIcon1 = new BMapGL.Icon('', new BMapGL.Size(50, 70));
  selectIcon2 = new BMapGL.Icon('', new BMapGL.Size(50, 70));
  if (nt < 79) {
    index === 0 ? myIcon = selectIcon1 : myIcon = icon1
  } else if (nt >= 79) {
    index === 0 ? myIcon = selectIcon2 : myIcon = icon2
  }
  const marker = new BMapGL.Marker(point, { icon: myIcon });
  if (index === 0) {
    marker.iconImg = nt >= 79 ? '2' : '1'
    marker.setZIndex(90)

  } else {
    marker.iconImg = nt >= 79 ? '2' : '1'
    marker.setZIndex(80)
  }
  marker.proIconId = project.id
  marker.selectPoint = point
  if (baiduMap) {
    baiduMap.addOverlay(marker);
  }
  // if (index === 0) {
  //   addCircle(marker)
  // }
  marker.addEventListener('click', (event) => {
    selectMarker = marker
    // baiduMap.openInfoWindow(markerContent, point);
    // 在相同位置新增一个newMarker，这样相当于覆盖掉原有的图标
    // console.log('e', event);
    // console.log('点位相同', event.target.proIconId === bsStore.projectId);
    if (event.target.proIconId === bsStore.projectId) {
      // 重复点击一个项目
    } else {
      bsStore.setProjectId(event.target.proIconId)
    }
  });
}

// 重绘icon
const redrawIcon = (nval, oval) => {
  const infoContent = getInfoContent(bsStore.project);
  let windInfo = new BMapGL.InfoWindow(infoContent, { width: 250, height: 230, title: "项目信息" });
  let odp = getPointById(oval)[0]
  delCircle(odp)
  odp.setIcon(odp.iconImg === '1' ? icon1 : icon2)

  selectMarker = getPointById(nval)[0]
  selectMarker.setIcon(selectMarker.iconImg === '1' ? selectIcon1 : selectIcon2)
  // addCircle(selectMarker)
  baiduMap.setCenter(selectMarker.selectPoint)
  let nzoom = baiduMap.getZoom()
  setTimeout(() => { baiduMap.setZoom(nzoom > 8 ? nzoom : 8) }, 500);

  baiduMap.openInfoWindow(windInfo, selectMarker.selectPoint);
}

// 获取标注点
const getPointById = (id) => {
  let arr = []
  let overlays = baiduMap.getOverlays(); // 获取地图上所有的overlay
  overlays.forEach(function (overlay) {
    if (overlay instanceof BMapGL.Marker) { // 判断是否是Marker类型
      if (overlay.proIconId === id) {
        arr.push(overlay)
      }
    }
  });
  return arr
}

watch(() => bsStore.projectId,
  (nval, oval) => {
    console.log('BaiDuMap->watch', nval, oval, baiduMap);
    if (baiduMap) {
      if (oval === 0) {
        setTimeout(() => { initMap('绘制') }, 5000);
      } else {
        if (nval !== 0 && nval !== 'all') {
          redrawIcon(nval, oval)
        }
      }
    } else {
      setTimeout(() => { initMap('绘制') }, 5000);
    }
  }
)

// 在组件挂载之前执行
onBeforeMount(() => { })

// 组件挂载后
onMounted(() => {
  console.log('组件挂载后->', bsStore.projectId);
  initMap('初始化')
});

// 组件卸载后
onUnmounted(() => {
  baiduMap = null
  // 全部清除地图上的覆盖物
  // baiduMap.clearOverlays();
  bsStore.setProjectId(0)
});

defineExpose({ baiduMap })   
</script>

<style></style>

<style lang="scss">
.bai-du-map-cls {
  width: 100%;
  background-image: none !important;
  background-color: #113653;
  position: absolute;

  div:nth-child(3) {
    display: none !important;
  }
}

.dot {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 50;
}

.dot:hover {
  z-index: 100;
}

/* 内环  */
.dot>.before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: transparent;
  z-index: 2;
  animation: color1 1.5s ease-out;
  animation-iteration-count: infinite;
  margin-top: 63px;
  margin-left: 12px;
}

/* 产生动画（向外扩散变大）的圆圈  */
.dot>.circleOne {
  content: '';
  position: absolute;
  width: 30px;
  height: 15px;
  left: -2px;
  top: -3px;
  border: 1px solid #f31010;
  background: rgba(243, 16, 16, 0.9);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  z-index: 2;
  opacity: 0;
  animation: color2 1.5s ease-out;
  animation-iteration-count: infinite;
  margin-top: 63px;
  margin-left: 12px;
}

.dot>.circleTwo {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  left: -12px;
  top: -13px;
  border: 1px solid #f31010;
  background: rgba(243, 16, 16, 0.7);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  z-index: 2;
  opacity: 0;
  animation: color2 1.5s ease-out;
  animation-iteration-count: infinite;
  margin-top: 63px;
  margin-left: 12px;
}


.dot>.circleThree {
  content: '';
  position: absolute;
  width: 70px;
  height: 45px;
  left: -20px;
  top: -18px;
  border: 1px solid #f31010;
  background: rgba(243, 16, 16, 0.7);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  z-index: 2;
  opacity: 0;
  animation: color2 1.5s ease-out;
  animation-iteration-count: infinite;
  margin-top: 63px;
  margin-left: 12px;
}

/* 产生动画（向外扩散变大）的圆圈  */

// 动画效果
@keyframes color1 {
  0% {
    transform: scale(0.1);
    opacity: 0.5;
  }

  25% {
    transform: scale(0.5);
    opacity: 0.5;
  }

  50% {
    transform: scale(1);
    opacity: 0.5;
  }

  75% {
    transform: scale(1);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes color2 {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  25% {
    transform: scale(0.5);
    opacity: 0.2;
    /* 提高起始透明度 */
  }

  50% {
    transform: scale(1);
    opacity: 0.5;
  }

  75% {
    transform: scale(1.5);
    opacity: 0.2;
    /* 降低结束透明度 */
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}


.dot>div {
  z-index: 3;
  top: 0;
  left: 0;
}
</style>
